import React, { FC, useEffect, useState } from 'react'
import noDataUrl from '@/assets/images/noData.png'
import Header from '@/components/home/header'
import { useNavigate } from 'react-router-dom'
import { StuAdd } from '@/types/address/userAdd'
import { addressLists } from '@/api/address'
import { useAppSelector, useAppDispatch } from '@/store'
import pic_Address from '@/assets/images/pic_address.png'
import {
  selectCurrendStdAdd,
  selectStdAddList,
  initCurrendStdAdd,
  setEditorStatus,
  setEditorStdAdd,
  setStdAddList,
} from '@/store/address'
const welfare: FC<{}> = () => {
  const navigate = useNavigate() //      navigate('/addAddress')
  const dispatch = useAppDispatch() //          dispatch(incrementByAmount(100))

  const [stdAddList, setStdAddLists] = useState<StuAdd[]>([])
  const currendStdAdd = useAppSelector(selectCurrendStdAdd)
  useEffect(() => {
    addressLists({}).then((res) => {
      dispatch(setStdAddList(res.result.data))
      setStdAddLists(res.result.data)
    })
  }, [])
  const [selectAdd, setSelectAdd] = useState<Partial<StuAdd>>(currendStdAdd || {})
  const selectCssStr = 'text-red-FF4A4A '
  return (
    <div className="w-full h-full  ">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'收货地址'}
      ></Header>
      <div className="w-full h-r50.0 overflow-y-auto">
        {stdAddList.map((val, key) => {
          return (
            <div
              className="flex h-auto   pr-r1.6 pl-r1.6 pt-r1.0 pb-r1.0 w-auto  bg-white  shadow-bs5 m-r1.2  rounded-r0.8 "
              key={key}
            >
              <span
                onClick={() => {
                  setSelectAdd(val)
                  dispatch(initCurrendStdAdd(val))
                }}
                className={
                  ' flex-1.1     leading-r5.5 w-r2.5 text-r2.9 text-left ' +
                  (selectAdd.id === val.id ? selectCssStr : '')
                }
              >
                {selectAdd.id === val.id ? (
                  <i className="iconfont icon-icon_selected text-r1.6 "></i>
                ) : (
                  <i className="iconfont icon-icon_unselected text-r1.6 "></i>
                )}
              </span>
              <div
                className=" flex-1.7 text-r1.4 font-normal "
                onClick={() => {
                  setSelectAdd(val)
                  dispatch(initCurrendStdAdd(val))
                  navigate(-1)
                }}
              >
                <div className=" text-r1.2 font-normal text-gray-666666 h-r1.2 leading-r1.2 mb-r0.7 ">
                  <span>{val?.province_name}</span> <span>{val?.city_name}</span>{' '}
                  <span>{val?.county_name}</span>
                </div>
                <div className=" text-r1.6 font-medium h-r1.8 leading-r1.8  text-gray-333333 mb-r0.7 ">
                  {val?.detail}{' '}
                </div>
                <div className="h-1.8">
                  <span className="text-r1.2 font-normal leading-r1.3 text-gray-666666">
                    <span>{val?.name} </span>
                    <span>{val?.phone}</span>
                  </span>
                </div>
              </div>

              <div
                className=" flex-1.125 text-r1.4 font-normal text-right"
                onClick={() => {
                  dispatch(setEditorStatus(true))
                  dispatch(setEditorStdAdd(val))
                  navigate('/addAddress')
                }}
              >
                <span className=" relative top-r2.0">
                  {' '}
                  <i className="w-r2.0 h-r2.0 iconfont icon-icon_edit"></i>
                </span>
              </div>
            </div>
          )
        })}
      </div>
      <div className="w-full fixed bottom-r2.0 ">
        <span
          onClick={() => {
            navigate('/addAddress')
          }}
          className=" relative left-1/2 transform -translate-x-1/2 text-r1.4 h-r4.0 w-r26.0  text-white leading-r4.0 rounded-r2.0   bg-gradient-to-r from-orange-FF664F to-orange-FF3627 inline-block text-center "
        >
          + 添加收货地址
        </span>
      </div>
    </div>
  )
}

export default welfare
